
<template>
  <div>
    <Header />
    <div class="back">
      <div class="container" style="margin: 0 auto">
        <Nested :list='nestedList' />
        <div class="default-box" style="margin-top: 0; padding: 25px 0;">
          <div class="box-title">
            <div class="vertical-line" />
            <span>全部院校</span>
          </div>
          <div class="content">
            <div class="search">
              <input type="text" placeholder="请输入关键字搜索">
              <button @click="open = true">搜索</button>
            </div>
            <div class="filter">
              <div class="filter-title flex">
                <div>考生信息：</div>
              </div>
              <div class="filter-input flex">高考位次：<div class="filter-input-item"><input type="text">分</div>
              </div>
              <div class="flex">选课： <div class="filter-box flex">
                  <div v-for="item in majorList" :key="(item as string)"
                    :class="['filter-item', { 'active': selectList.includes(item) }]">
                    {{ item }}
                  </div>
                </div>
              </div>
              <div>山东</div>
            </div>
            <Filter :list="provinces" :selectList="selectList" title="学校地区" />
            <Filter :list="schoolType" :selectList="selectList" title="学校类型" />
            <Filter :list="schoolType2" :selectList="selectList" title="学校级别" />
            <Filter :list="type" :selectList="selectList" title="办学性质" />
            <Filter :list="rank" :selectList="selectList" title="大学排名" />
            <Filter :list="schoolLevel" :selectList="selectList" title="著名学校" />
          </div>
        </div>
        <div class="content2 flex">
        </div>
      </div>
    </div>
    <Footer />
    <div ref="modal">
      <Modal v-model:open="open" title="" :footer="null" :maskClosable="true" :closable="false"
        :getContainer="() => $refs.modal as any" style="width: 500px;" width="500">
        <div class="title flex">
          <div :class="{ 'left': true, active: selectIndex === '1', ac1: selectIndex === '1', ac2: selectIndex === '2' }"
            @click="selectIndex = '1'">分数选大学</div>
          <div :class="{ 'right': true, active: selectIndex === '2' }" @click="selectIndex = '2'">位次选大学</div>
        </div>
        <div class="content modal-content" v-if="selectIndex === '1'">
          <div class="flex column">
            <div class="flex one modal-title"><span>省</span><span>份</span></div> <input class="input" type="text">
          </div>
          <div class="flex column">
            <div class="modal-title">高考科目</div>
            <div class="flex two">
              <div v-for="item in majorList" :key="(item as string)"
                :class="['filter-item', { 'active': selectList.includes(item) }]">
                {{ item }}
              </div>
            </div>
          </div>
          <div class="flex column">
            <div class="modal-title">高考分数</div> <input class="input" type="text">
          </div>
          <button class="select" @click="open=false">选大学</button>
        </div>
        <div class="content modal-content" v-if="selectIndex === '2'">
          <div class="flex column">
            <div class="flex one modal-title"><span>省</span><span>份</span></div> <input class="input" type="text">
          </div>
          <div class="flex column">
            <div class="modal-title">高考科目</div>
            <div class="flex two">
              <div v-for="item in majorList" :key="(item as string)"
                :class="['filter-item', { 'active': selectList.includes(item) }]">
                {{ item }}
              </div>
            </div>
          </div>
          <div class="flex column two">
            <div class="modal-title">高考位次</div> <input class="input" type="text">
          </div>
          <button class="select" @click="open=false">选大学</button>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import Nested from '@/components/nested/index.vue'
import Filter from '@/components/filter/index.vue'
import { NestedType } from '@/components/nested/nested'
import { schoolType2, provinces, schoolType, schoolLevel, type, rank } from '@/components/universityNavList/data'
import { Modal } from 'ant-design-vue'
const nestedList = ref<NestedType[]>([{ name: '首页', path: '/' }, { name: '专业库', path: '/major' }])
const selectList = ref<string[]>(['不限', '全部'])
const majorList = ref(['物理', '化学', '生物', '政治', '历史', '地理'])
const open = ref(false)
const selectIndex = ref<string>('1')
</script>

<style lang="less" scoped>
@import "./index.less";

:deep(.css-dev-only-do-not-override-1qb1s0s .ant-modal .ant-modal-content) {
  padding: 0 !important;
}
</style>

